<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>盘古之手</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="__PUBLIC__/orderAdmin/element/element.css">
		<!-- import Vue -->
		<script src="__PUBLIC__/orderAdmin/js/vue.js"></script>
		<!-- import Element -->
		<script src="__PUBLIC__/orderAdmin/element/element.js"></script>
		<script src="__PUBLIC__/orderAdmin/js/jquery-1.7.min.js"></script>
		<script src="__PUBLIC__/orderAdmin/js/public.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			html,body {
				width: 100%;
				height: 100%;
			}
			#app {
				width: 100%;
				height: 100%;
				background-image: url("__PUBLIC__/orderAdmin/img/bgimg.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.main {
				width: 100%;
				height: 100%;
				text-align: center;
				box-sizing: border-box;
				background: rgba(0,0,0,0.3);
			}
			.title {
				font-size: 34px;
				color: #fff;
			}
			.content {
				width: 30%;
				background: #fff;
				margin-left: 25%;
				margin-top:13%;
				border-radius: 15px;
			}
			.boxtitle {
				width: 100%;
				text-align: center;
				padding: 20px 0;
				border-bottom: 1px solid #ccc;
			}
			.inputbox {
				padding: 25px;
			}
			.el-select {
				width: 100%;
			}
			.username{
				margin-top: 20px;
			}
			.password{
				margin-top: 20px;
			}
			.vertify{
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
			}
			.vertify .img {
				width: 40%;
				height: 40px;
				margin-left: 20px;
			}
			.vertify .img img {
				width: 100%;
				height: 100%;
			}
			.login {
				margin-top: 20px;
			}
			.el-button {
				width: 100%;
			}
			.el-input {
				margin-bottom: 15px;
			}
			.el-input img{
				width: 22px;
				height: 22px;
			}
			.logo {
				width: 25%;
				background: #fff;
				padding: 20px;
				margin-left: 25%;
				border-bottom-left-radius: 10px; 
				border-bottom-right-radius: 10px; 
			}
		</style>
	</head>
	<body>
		<div id="app">
		    <div class="main">
		    	<div class="logo">
		    		<div class="img"><img src="__PUBLIC__/orderAdmin/img/pangu.png" alt=""></div>
		    	</div>
		    	<div class="content">
		    		<div class="boxtitle">欢迎使用</div>
		    		<div class="inputbox">
		    			<div>
		    			    <el-input placeholder="账号" v-model="param.username">
		    			       <template slot="prepend"><img src="__PUBLIC__/orderAdmin/img/user.png" alt=""></template>
		    			    </el-input>
		    			</div>
		    			<div>
		    			    <el-input placeholder="密码" v-model="param.password" show-password>
		    			       <template slot="prepend"><img src="__PUBLIC__/orderAdmin/img/password.png" alt=""></template>
		    			    </el-input>
		    			</div>
						<!--<div class="vertify">-->
							<!--<el-input placeholder="验证码" v-model="param.verticode" clearable>-->
								<!--<template slot="prepend"><img src="__PUBLIC__/orderAdmin/img/password.png" alt=""></template>-->
							<!--</el-input>-->
							<!--<div class="img">-->
								<!--<img src="__PUBLIC__/orderAdmin/img/captcha.png" alt="">-->
							<!--</div>-->
						<!--</div>-->
			    		<div class="login">
							<el-button type="primary" @click="toLogin">登录</el-button>
			    		</div>
			    	</div>

		    	</div>
		    </div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
				    param: {
                        username: "",
                        password: "",
					}
				}
			},
			methods: {
				toLogin() {
				    var _this = this;
					$.post(HOME_URL + '/orderAdmin/index/check', _this.param, function (data) {
						if(data.status){
                            location.href = HOME_URL + '/orderAdmin/index/index'
						}else{
                            _this.$message.error(data.msg);
						}
                    }, 'json');
				}
			}
		})
	</script>
</html>